<template>
  <div class="sp-container">
    <el-card class="sp_card">
      <div>
        <el-tabs v-model="activeName" @tab-click="handleClick" class>
          <el-tab-pane label="我发起的" name="first">
            <div class="sh_zt">
              <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="审批状态">
                  <el-select v-model="value" placeholder="全部" style="width:120px;">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="开始时间">
                  <el-date-picker v-model="value1" type="monthrange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份"></el-date-picker>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
          <el-tab-pane label="我审批的" name="second">配置管理</el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      activeName: "first",
      formInline: {
        user: "",
        region: "",
      },
      value: "",
      value1: "",
      options: [
        {
          value: "选项1",
          label: "全部",
        },
        {
          value: "选项2",
          label: "待审",
        },
        {
          value: "选项3",
          label: "审批中",
        },
        {
          value: "选项4",
          label: "通过",
        },
        {
          value: "选项5",
          label: "失败",
        },
        {
          value: "选项6",
          label: "撤回",
        },
      ],
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
  components: {},
};
</script>

<style scoped lang='scss'>
.sp_card {
  width: 888px;
}
.sh_zt {
  padding: 15px 0;
  label {
    color: #999;
    margin-right: 10px;
  }
}
</style>
